<template>
    <div class="userAccount-main-box" :style='"height:"+heightWindow+"px"'>
        <van-nav-bar safe-area-inset-top placeholder :title="title" fixed />
        <van-cell :title="$t('WifiConnection')" is-link @click='goWifi' />
        <van-cell :title="$t('Local')" is-link @click='gotoLocalPage' />
        <van-cell :title="$t('Default.Site')" >
            <template #right-icon>
                <div class="sel" @click="showPicker2 = true" >{{siteName}}</div>
                <van-popup v-model="showPicker2" round position="bottom">
                <van-picker
                    show-toolbar
                    :columns='siteListData'
                    value-key='siteName'
                    @cancel="showPicker2 = false"
                    @confirm="setDefultSite"
                    :confirm-button-text="$t('OK')"
                    :cancel-button-text="$t('Cancel')"
                />
                </van-popup>
            </template>
        </van-cell>
        <van-cell class="loginOut_box" :title="$t('logOut')" clickable @click='logOut' />
        <div class="version-box">
            {{$t('Version')}} : 2021-6-25
        </div>
        <wifisetting ref="discriptShow"></wifisetting>
    </div>
</template>

<script>
import wifisetting from '../components/Protocol/WifiSetting'
export default {
    components: {
        wifisetting
    },
    props: {

    },
    data() {
        return {
            title:localStorage.getItem('userName'),
            showPicker2:false,
            siteName:'',
            heightWindow:400,
            siteListData:[]
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.heightWindow = window.screen.height-60
        this.getSiteList()
    },
    methods: {
        async getSiteList(){
            let {result:{rows}} = await this.API.siteList(localStorage.getItem('domain'),{
                'tokenId':localStorage.getItem('tokenId'),
                'current':1,
                'size':1000,
                'siteName':''
            })
            this.siteListData = rows
            this.siteName = rows.length&&rows[0].siteName
        },
        async setDefultSite(value,index){
            let res = await this.API.mysiteShowAsFirst(localStorage.getItem('domain'),{
                siteId:value.ids,
                userId:localStorage.getItem('userId'),
            })
            this.siteName =value.siteName
            if(res.success){
                this.comm.toastSuccess();
            }else{
                this.comm.toastFail();
            }
            this.showPicker2 = false;
        },
        goWifi(){
            this.$router.push({path:'/wifi'})
        },
        gotoLocalPage(){
            this.$router.push({path:'/localin',query:{from:'/main/user'}});
        },
        logOut(){
            if(!localStorage.getItem('remember')){
                localStorage.removeItem('password');
            }
            localStorage.removeItem('tokenId');
            localStorage.removeItem('userId');
            localStorage.removeItem('role');
            localStorage.removeItem('siteId');
            localStorage.removeItem('siteName');
            sessionStorage.removeItem('isInApp');
            this.$router.push({path:'/login'});
        }
    },
};
</script>

<style  lang="less" scoped>
.userAccount-main-box{
    position: relative;
    .loginOut_box{
        margin-top: 10px;
    }
    .version-box{
        position: absolute;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
        color: #989898;
        font-size: 14px;
    }
}
.van-cell{
    text-align: left;
}
</style>
